import React from "react";
// import styles from './index.module.less';
import {
    FriendsMould,
    FriendsHeadMould,
    AddrBookSearchMould,
    FriendsMainMould,
    ChatWrapMould,
    // ChatHeadMould,
    // ChatMaskMould,
    AddFriendSearchMould,
    SearchSlideMould,
} from "../chatMould/mould";
import Main from "./main";
import { connect } from "react-redux";
import { isInSearch } from "@redux/actions02";
import { Outlet } from "react-router-dom";

const AddressBook = (props) => {
    const { isSearch } = props;

    return (
        <>
            <FriendsMould>
                <FriendsHeadMould>
                    {isSearch ? (
                        <AddFriendSearchMould />
                    ) : (
                        <AddrBookSearchMould />
                    )}
                </FriendsHeadMould>
                <FriendsMainMould>
                    <Main />
                    {isSearch ? <SearchSlideMould></SearchSlideMould> : null}
                </FriendsMainMould>
            </FriendsMould>
            <ChatWrapMould>
                {/* <ChatHeadMould />
      <ChatMaskMould /> */}
                <Outlet />
            </ChatWrapMould>
        </>
    );
};

export default connect((state) => ({ isSearch: state.isSearchReducer }), {
    isInSearch,
})(AddressBook);
